<script setup>
    import { ref,onMounted } from 'vue'
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    //import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'
    import { STLLoader } from 'three/addons/loaders/STLLoader.js'
    // init
    const props = defineProps({
        rotate_x: Number,
        rotate_y: Number,
        rotate_z: Number,
        depth: Number,
        dir_z: Number
    })

    const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 200 );
    //camera.position.z = 1;
    camera.position.set(0,-80,20)
    camera.lookAt(0,0,0)

    const scene = new THREE.Scene();
    //scene.background = new THREE.Color(0x233150);///{color:0x662232}

    let rov = null
    const loader = new STLLoader();
    const mod_file_path = new URL('../assets/rov-all.stl',import.meta.url).href 
    
    loader.load(mod_file_path,(geometry)=>{
        const mat = new THREE.MeshNormalMaterial()
        const mesh = new THREE.Mesh(geometry,mat)
        mesh.scale.set(0.1, 0.1, 0.1); //缩放
        mesh.rotation.z = Math.PI
        geometry.center(); //居中显示
        scene.add(mesh)
        rov = mesh
        renderer.render(scene, camera); //执行渲染操作
        requestAnimationFrame(do_render)
    },undefined, err =>{
        console.error(err)
    })
    const axesHelper = new THREE.AxesHelper(50);     //添加辅助坐标线
    scene.add(axesHelper);
    const axesHelper2 = new THREE.AxesHelper(-50);     //添加辅助坐标线
    scene.add(axesHelper2);
    // const gridHelper = new THREE.GridHelper( 200, 20, 0x00ff00,0xededed );
    // scene.add( gridHelper );
    const yy_light = new THREE.AmbientLight( 0x808080 ,2); // 柔和的白光
    scene.add(yy_light)
    // 电筒型光

    const spotLight = new THREE.SpotLight( 0xffffff ,6);
    spotLight.position.set( 100, -200, -200 );
    scene.add(spotLight)

    const renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( 560,440)// window.innerWidth/2, window.innerHeight/2 );

    const controls = new OrbitControls( camera, renderer.domElement );
    controls.addEventListener('change', function () {
        renderer.render(scene, camera); //执行渲染操作
        //console.log('camera.position',camera.position);
    });//监听鼠标、键盘事件

    onMounted(()=>{
        const  divEle = document.getElementById('gogo')
        const bgc_color = getComputedStyle(divEle).getPropertyValue('--rov_bgc')
        const rov_color = getComputedStyle(divEle).getPropertyValue('--rov_body')

        //scene.background = new THREE.Color( _r, _g, _b)
        //material.color.setStyle(rov_color)// = new THREE.Color($r, $g, $b)
        renderer.setClearColor(bgc_color,0.95)

        renderer.render(scene, camera); //执行渲染操作
        divEle.appendChild( renderer.domElement );
        //controls.saveState()
    })



    let [lastX,lastY,lastZ] = [0,0,0]
    function do_render(){
        //controls.reset()
        const x = -props.rotate_y/180 * Math.PI
        const y =  props.rotate_x/180 * Math.PI
        const z = props.rotate_z/180 * Math.PI

        //rov.rotateZ(z - lastZ)
        rov.rotateX(x - lastX)
        rov.rotateY(y - lastY)

        lastX = x
        lastY = y
        //lastZ = z
        renderer.render(scene,camera)

        requestAnimationFrame(do_render)
    }

</script>


<template>
    <div class="relative">
        <h3 class='lh3'>——ROV位置姿态模型——</h3>
        <div id="gogo"></div>
        <div class="absolute">
            <div>横滚角：{{rotate_x}}</div>
            <div>俯仰角：{{rotate_y}}</div>
            <div>航向角：{{dir_z}}</div>
            <div>水深：{{depth}}</div>
        </div>
        <slot></slot>
    </div>
</template>

<style scoped>
.read-the-docs {
    color: #888;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
    top: 2.8em;
    left: 4px;
    z-index: 2;
    text-align: left;
}
.lh3{
    text-align: right;
    margin: 0.2em 0;
    padding-right: 2em;
}
#gogo{
    --rov_bgc:#233150;
    --rov_body:#302c3a;
}
@media (prefers-color-scheme: light) {
    #gogo{
        --rov_bgc:#a0a9a2;
        --rov_body:#2324d7;
    }
}
</style>
